<script setup lang="ts">
import { ref } from 'vue'
import { Card, Cond, CondItem, DateRangePicker, Enum, Input, Space, Table, TableColumn } from '@idmy/ui'
import { Api } from '@idmy/core'
import { page } from './services'

const input = ref({
  sorts: ['createdAt', 'desc'],
  params: {
    accountId: undefined,
    userId: undefined,
    status: undefined,
    createdAts: [],
  },
})
</script>
<template>
  <Card>
    <Api ref="apiRef" :load="page" v-model:input="input" browser>
      <Space direction="vertical">
        <Cond :col="4">
          <CondItem title="账号ID" field="accountId">
            <Input v-model="input.params.accountId" />
          </CondItem>
          <CondItem title="用户ID" field="userId">
            <Input v-model="input.params.userId" />
          </CondItem>
          <CondItem title="状态" field="status">
            <Enum v-model="input.params.status" clazz="AccountStatus" />
          </CondItem>
          <CondItem title="创建日期" field="createdAts">
            <DateRangePicker v-model="input.params.createdAts" />
          </CondItem>
          <template #op></template>
        </Cond>
        <Table>
          <TableColumn title="ID" field="id" :width="70" />
          <TableColumn title="账号ID" field="accountId" :width="70" />
          <TableColumn title="用户ID" field="userId" :width="70" />
          <TableColumn title="状态" field="status" :width="90" format="Enum" params="AccountStatus" />
          <TableColumn title="备注" field="remark" align="left" />
          <TableColumn title="创建日期" :width="160" field="createdAt" type="Datetime" sortable />
        </Table>
      </Space>
    </Api>
  </Card>
</template>
